<template>
  <div>
    <div class="top">
      <p class="inp">
        <span>标题 : </span>
        <input type="text" placeholder="请输入" />

        <el-button type="primary" :loading="false" @click="dianji()"
          >搜索</el-button
        >
      </p>
    </div>
    <div class="bod">
      <div class="tab">
        <el-table
          :data="tab.tableData"
          height="60vh"
          style="width: 100%"
          :cell-style="{ padding: '20px 0' }"
          :header-cell-style="{
            height: '80px',
            background: 'rgb(247,247,247)',
          }"
        >
          <el-table-column prop="headline" label="标题" align="center" />
          <el-table-column prop="content" label="内容" align="center" />
          <el-table-column prop="receive" label="接收者" align="center" />
          <el-table-column prop="time" label="通知时间" align="center" />
        </el-table>
      </div>
      <!-- <div class="bottom">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 30, 40]"
          :small="small"
          :disabled="disabled"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="100"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div> -->
    </div>
    <div></div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { messageStore } from "../Information/hsuju";

const tab = messageStore();

function dianji() {}
</script>

<style scoped>
.top {
  height: 76px;
  background-color: white;
  line-height: 76px;
  box-sizing: border-box;
  padding-left: 20px;
  border-radius: 10px;
  margin-top: 16px;
}
input {
  width: 220px;
  height: 36px;
  outline: none;
  border: transparent;
  background-color: rgb(246, 246, 246);
  padding-left: 10px;
  margin-right: 41px;
  border-radius: 5px;
}
.inp {
  font-size: 18px;
}
.inp span {
  font-size: 14px;
}
button {
  text-align: center;
  width: 70px;
  height: 36px;
  border-radius: 5px;
  line-height: 36px;
  outline: none;
  border: transparent;
  background-color: rgb(255, 106, 108);
  color: white;
  font-size: 14px;
}
button:hover {
  /* background-color: rgb(255, 106, 108); */
  opacity: 0.8;
}
.bod {
  width: 100%;
  height: 70vh;
  background-color: white;
  margin-top: 16px;
  border-radius: 10px;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}

.compile {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  border: 1px solid #dcdfe6;
  color: #7a7b7f;
}
.compile:hover {
  background-color: rgb(255, 106, 108);
}
.bottom {
  position: absolute;
  bottom: 20px;
}
</style>
